<template>
  <div id="page-sms-recharge">
    <h2>短信充值</h2>

    <Card class="mt20" :padding="150">
      <div style="width: 660px; margin: 0 auto">
        <Card class="recharge-item"
          v-for="(item, index) in msgRecTypeCodeList"
          :key="index"
          :class="{ 'selected': selected.code === item.code}">
          <div @click="selectItem(item, index)">
            <h2>{{item.name}}元</h2>
            <p class="mt10">{{item.code}}条</p>
          </div>
        </Card>
      </div>
      <Row class="mt40">
        <Col span="14" offset="5" class="tc">
          <Button type="primary" size="large" :loading="isSubmiting" @click="confirmCharge">充值提交</Button>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import financeApi from '@/api/finance'

export default {
  name: 'page-sms-recharge',
  data () {
    return {
      isSubmiting: false,
      selected: {
        code: null,
        name: null
      },
      form: {}
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      msgRecTypeCodeList: 'msgRecTypeCodeList'
    })
  },
  methods: {
    selectItem (item) {
      this.selected = item
      this.form.pkCode = item.pkCode
    },
    confirmCharge () {
      if (!this.selected.code) {
        this.$Modal.info({
          title: '提示',
          content: '请先选择需要充值的金额',
          onOk: () => {}
        })
        return
      }

      this.$Modal.confirm({
        title: '提示',
        content: `您充值短信条数为${this.selected.code}条，金额为${this.selected.name}元，是否继续？`,
        onOk: () => {
          this.isSubmiting = true
          this.save()
        }
      })
    },
    async save () {
      this.form.pkRclubInfo = this.userInfo.pkRclubInfo
      const { body } = await financeApi.saveSmsRechargeDetail(this.form)
      if (this.$apiHelper.requestSuccessed(body.responseCode)) {
        let pkRechargeDetail = body.responseData.pkRechargeDetail
        this.$router.push({
          path: `/finance/sms-recharge-confirm/${pkRechargeDetail}`
        })
      } else {
        setTimeout(() => {
          this.$Modal.warning({
            title: '提示',
            content: body.desc,
            onOk: () => {}
          })
          this.isSubmiting = false
        }, 500)
      }
    }
  },
  mounted () {
    this.$store.dispatch('getCode', 'msg_rectype')
  }
}
</script>

<style lang="less">
#page-sms-recharge {
  .recharge-item {
    width: 200px;
    display: inline-block;
    margin: 10px;
    text-align: center;
    cursor: pointer;
    div {
      width: 100%;
      height: 100%;
    }

    &.selected {
      border-color: #2d8cf0;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }
  }
}
</style>
